import React from 'react'
import { Card, Col, Row } from 'antd'
import LineCharts from './components/LineCharts'
import PieCharts from './components/PieCharts'
import DataCard from '@/components/DataCard'
import RadarCharts from './components/RadarCharts'
import BarCharts from './components/BarCharts'

import styles from './index.module.less'

const Dashboard: React.FC = () => {
  return (
    <>
      <div className={styles.row}>
        <Card>React-Antd-Admin 欢迎你！</Card>
      </div>
      <div>
        <Row gutter={20}>
          <Col xs={24} sm={12} lg={6}>
            <DataCard title='流量' end={3500} iconColor='#40c9c6' iconName='visits'></DataCard>
          </Col>
          <Col xs={24} sm={12} lg={6}>
            <DataCard
              title='收入金额'
              end={66666.666}
              iconColor='#f4516c'
              iconName='income'
              decimals={3}
              prefix='¥'
            ></DataCard>
          </Col>
          <Col xs={24} sm={12} lg={6}>
            <DataCard title='订单数' end={2000} iconColor='#40c9c6' iconName='shopping'></DataCard>
          </Col>
          <Col xs={24} sm={12} lg={6}>
            <DataCard title='消息数' end={1500} iconColor='#36a3f7' iconName='info'></DataCard>
          </Col>
        </Row>
      </div>
      <div className={styles.row}>
        <Card title='订单和流水势图'>
          <Row gutter={20} className={styles.row}>
            <Col span={24}>
              <LineCharts width='100%' height='400px'></LineCharts>
            </Col>
          </Row>
        </Card>
      </div>
      <div className={styles.row}>
        <Row gutter={20}>
          <Col xs={24} sm={12} lg={8}>
            <Card>
              <PieCharts width='100%' height='400px'></PieCharts>
            </Card>
          </Col>
          <Col xs={24} sm={12} lg={8}>
            <Card>
              <RadarCharts width='100%' height='400px'></RadarCharts>
            </Card>
          </Col>
          <Col xs={24} sm={12} lg={8}>
            <Card>
              <BarCharts width='100%' height='400px'></BarCharts>
            </Card>
          </Col>
        </Row>
      </div>
    </>
  )
}
export default Dashboard
